<template>
	<view class="page-background">
		<view class="uni-container">
			<uni-forms ref="form" :model="formData" validate-trigger="submit" err-show-type="toast">

				<uni-forms-item name="brand" label="品牌" required :label-width=78>
					<uni-easyinput placeholder="品牌" v-model="formData.brand"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="is_enable" label="是否启用" :label-width=78>
					<view class="switch-align">
						<switch :checked=formData.is_enable @change="switchChange" />
					</view>
				</uni-forms-item>
				<!-- <view class="item" style="border: 1px solid red;"> -->
				<view class="button-group">
					<!-- <button type="default" class="submit-button-lg button" @click="submit">提交</button> -->
					<view class="submit-button-lg button-normal" hover-class="button-hover" @click="submit">提交</view>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import { validator } from '../../../js_sdk/validator/kdb-brand.js';
	const brand = uniCloud.importObject("star-service", {
		customUI: true // 取消自动展示的交互提示界面
	})

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				result[key] = validator[key]
			}
		}
		return result
	}

	export default {
		data() {
			let formData = {
				"_id": "",
				"brand": "",
				"is_enable": true
			}
			return {
				// action: "", //调用当前页面的行为
				formData,
				formOptions: {
					"isenable_localdata": [{
							"value": true,
							"text": "是"
						},
						{
							"value": false,
							"text": "否"
						}
					]
				},
				rules: {
					...getValidator(Object.keys(formData))
				}
			}
		},
		onLoad(e) {
			// console.log(e)
			// 这里接收参数
			if (e.action === 'add') {
				this.action = 'add'
				// console.log(this.action)
			} else if (e.action === 'edit') {
				this.action = 'edit'
				this.formData = JSON.parse(decodeURIComponent(e.item))
				// console.log(this.formData)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 因为没有双向绑定，必须手动变更状态
			 */
			switchChange: function(e) {
				this.$set(this.formData, 'is_enable', e.detail.value)
				// console.log(this.formData)
			},
			/**
			 * 验证表单并提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				if (this.action === 'add') {
					this.$refs.form.validate().then(res =>
						brand.addBrand(res)).then(addres => {
						if (addres.errCode === 0) {
							uni.showToast({
								icon: 'none',
								title: '新增成功'
							})
							// console.log(addres)
							this.getOpenerEventChannel().emit('refreshData')
							setTimeout(() => uni.navigateBack(), 500)
						}
						// console.log(addres)
					}).catch(err => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					})
				} else if (this.action === 'edit') {
					this.$refs.form.validate().then(res =>
						brand.updateBrand(this.formData._id, res)).then(editres => {
						if (editres.errCode === 0) {
							uni.showToast({
								icon: 'none',
								title: '修改成功'
							})
							this.getOpenerEventChannel().emit('refreshData')
							setTimeout(() => uni.navigateBack(), 500)
						}
					}).catch(err => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					})
				}
				uni.hideLoading()
			},
			/**
			 * 提交新增表单
			 */
			// addsubmitForm(value) {
			// 使用  提交数据
			// brand.addBrand(value).then((res) => {
			// if (res.errCode === 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '新增成功'
			// 	})
			// 	// this.getOpenerEventChannel().emit('refreshData')
			// 	// setTimeout(() => uni.navigateBack(), 500)
			// }
			// return res
			// }).catch((err) => {
			// uni.showModal({
			// 	content: err.message || '请求服务失败',
			// 	showCancel: false
			// })
			// return err
			// })
			// },
			/**
			 * 提交新增表单
			 */
			// updatasubmitForm(value) {
			// 使用  提交数据
			// console.log(value)
			// brand.updateBrand(this.formData._id, value).then((res) => {
			// if (res.errCode === 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '修改成功'
			// 	})
			// 	this.getOpenerEventChannel().emit('refreshData')
			// 	setTimeout(() => uni.navigateBack(), 500)
			// }
			// return res
			// }).catch((err) => {
			// uni.showModal({
			// 	content: err.message || '请求服务失败',
			// 	showCancel: false
			// })
			// return err
			// })
			// },
		}
	}
</script>

<style lang="scss">
	.uni-container {
		margin: 10rpx; //列表上下间距
		border-radius: 20rpx; //圆角直径
		background: $uni-bg-color; //列表容器背景色
		padding: 15px;
	}

	.switch-align {
		display: flex; //子元素对齐方式，弹性盒子
		justify-content: flex-end; //子元素靠左对齐
		margin-top: 5rpx;
	}

	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		/* color: #666; */
		/* border: 1px #e5e5e5 solid; */
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center; //居中对齐
		margin-top: 100rpx; //距离上部组件距离
	}

	// .button {
	// 	background-color: #007aff;
	// 	color: #ffffff
	// }
</style>